<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="query.studentName" placeholder="学员姓名" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-select clearable filterable v-model="query.correctFlag" placeholder="批改状态">
          <el-option
            v-for="item in correctArray"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select
          v-if="query.gradeType"
          clearable filterable
          v-model="query.subjectId"
          placeholder="请选择科目">
          <el-option
            v-for="item in subjectList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          v-if="hasPermission(['system:exam:list'])"
          @click="searchStudentExam"
          icon="el-icon-search" type="primary">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="studentTestPaperList"
      border
      v-loading="loading"
      style="width: 100%;">

      <el-table-column
        prop="student_name"
        align="center"
        label="学员姓名">
      </el-table-column>

      <el-table-column
        prop="sex"
        align="center"
        label="性别">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.sex === 1" size="small" type="success">男</el-tag>
          <el-tag v-else-if="scope.row.sex === 2" size="small" type="info">女</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="name"
        align="center"
        label="年级">
        <template slot-scope="scope">
          <el-tag size="small">{{scope.row.grade_type | getGradeName}}</el-tag>
        </template>
      </el-table-column>

     <el-table-column
        prop="name"
        align="center"
        label="试卷名称">
       <template slot-scope="scope">
        <div>{{paper_name}}</div>
       </template>
      </el-table-column>

     <!-- <el-table-column
        prop="subject_name"
        align="center"
        label="科目">
      </el-table-column>-->

      <el-table-column
        prop="do_paper_date"
        align="center"
        :formatter="formatterDoPaperDate"
        label="考试时间">
      </el-table-column>

      <el-table-column
        prop="mark"
        sortable
        align="center"
        label="总分">
        <template slot-scope="scope">
           <template v-if="scope.row.mark === 0">{{scope.row.system_mark}}</template>
          <template v-else>{{scope.row.mark}}</template>
        </template>
      </el-table-column>

      <el-table-column
        prop="do_paper_date"
        align="center"
        :formatter="formatterDoPaperDate"
        label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.correct_flag" size="small" type="success">已批改</el-tag>
          <el-tag v-else-if="scope.row.type === 2" size="small" type="danger">待批改</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        header-align="center"
        align="center"
        min-width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click="lookStudentPaperQuestion(scope.row)"
            size="small"
            type="warning">人工评卷</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      @size-change="sizeChangeHandler"
      @current-change="currentChangeHandler"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
  import { getGradeType } from '@/utils/education-api'
  let thisPage = null
  export default {
    name: 'studentExam',
    data () {
      return {
        studentTestPaperList: [],
        loading: true,
        modeId: '',
        paper_name: sessionStorage.getItem('paper_name'),
        testPaperId: null,
        studentId: '',
        currentPage: 1,
        pageSize: 10,
        query: {
          studentName: '',
          correctFlag: ''
        },
        totalCount: 0,
        paper_mark: 0,
        correctArray: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '已批改',
            value: '1'
          },
          {
            label: '待批改',
            value: '0'
          }
        ],
        gradeTypeList: []
      }
    },

    beforeCreate () {
      thisPage = this
    },

    mounted () {
      this.testPaperId = this.$route.query.testPaperId
      this.paper_mark = this.$route.query.paper_mark
      this.getStudentTestPaperList()
      getGradeType(data => {
        this.gradeTypeList = data
      })
    },

    methods: {

      searchStudentExam () {
        this.currentPage = 1
        this.getStudentTestPaperList()
      },

      getStudentTestPaperList () {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/studentInfo/getStudentPaperList'), {
          params: {
            offset: (that.currentPage - 1) * that.pageSize,
            limit: that.pageSize,
            keyWord: that.query.studentName,
            correctFlag: that.query.correctFlag,
            testPaperId: that.testPaperId
          }
        }).then(function (response) {
          that.studentTestPaperList = response.data.data.dataList
          that.loading = false
          that.totalCount = response.data.data.total
        })
      },

      lookStudentPaperQuestion (item) {
        let studentExamInfo = {
          studentId: item.student_id,
          testPaperId: item.test_paper_info_id,
          paper_name: this.paper_name,
          student_mark: item.mark,
          paper_mark: this.paper_mark,
          subject_name: item.subject_name,
          student_name: item.student_name
        }
        this.$store.commit('map/updateStudentExamInfo', studentExamInfo)
        this.$router.push({
          name: 'studentQuestionHistory'
        })
      },

      sizeChangeHandler (val) {
        this.pageSize = val
        this.currentPage = 1
        this.getStudentTestPaperList()
      },

      formatterDoPaperDate (row, column) {
        if (!row.create_date) {
          return '--'
        }
        return this.moment(row.create_date).format('YYYY-MM-DD HH:mm')
      },

      currentChangeHandler (val) {
        this.currentPage = val
        this.getStudentTestPaperList()
      }
    },

    filters: {
      getGradeName (gradeType) {
        for (let i in thisPage.gradeTypeList) {
          if (thisPage.gradeTypeList[i].code === gradeType) {
            return thisPage.gradeTypeList[i].value
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
